import React from 'react';
import { useLocation, useNavigate } from 'react-router-dom';

/**
 * 路由测试组件
 * 用于测试路由功能是否正常
 */
const RouteTest = () => {
  const location = useLocation();
  const navigate = useNavigate();

  return (
    <div style={{ padding: '20px' }}>
      <h2>🧪 路由测试页面</h2>
      
      <div style={{ 
        backgroundColor: '#f8f9fa', 
        padding: '15px', 
        borderRadius: '5px',
        marginBottom: '20px'
      }}>
        <h3>当前路由信息：</h3>
        <p><strong>路径：</strong> {location.pathname}</p>
        <p><strong>搜索参数：</strong> {location.search}</p>
        <p><strong>哈希：</strong> {location.hash}</p>
        <p><strong>状态：</strong> {JSON.stringify(location.state)}</p>
      </div>

      <div style={{ 
        backgroundColor: '#e7f3ff', 
        padding: '15px', 
        borderRadius: '5px',
        marginBottom: '20px'
      }}>
        <h3>路由功能测试：</h3>
        <button 
          onClick={() => navigate('/')}
          style={{
            margin: '5px',
            padding: '8px 16px',
            backgroundColor: '#007bff',
            color: 'white',
            border: 'none',
            borderRadius: '4px',
            cursor: 'pointer'
          }}
        >
          跳转到首页
        </button>
        
        <button 
          onClick={() => navigate('/graphics-test')}
          style={{
            margin: '5px',
            padding: '8px 16px',
            backgroundColor: '#28a745',
            color: 'white',
            border: 'none',
            borderRadius: '4px',
            cursor: 'pointer'
          }}
        >
          跳转到图形测试页
        </button>
        
        <button 
          onClick={() => navigate('/nonexistent')}
          style={{
            margin: '5px',
            padding: '8px 16px',
            backgroundColor: '#dc3545',
            color: 'white',
            border: 'none',
            borderRadius: '4px',
            cursor: 'pointer'
          }}
        >
          测试404页面
        </button>
      </div>

      <div style={{ 
        backgroundColor: '#fff3cd', 
        padding: '15px', 
        borderRadius: '5px'
      }}>
        <h3>✅ 路由系统状态：</h3>
        <ul>
          <li>✅ useLocation Hook 正常工作</li>
          <li>✅ useNavigate Hook 正常工作</li>
          <li>✅ 路由组件渲染正常</li>
          <li>✅ 导航功能正常</li>
        </ul>
      </div>
    </div>
  );
};

export default RouteTest;
